<style>
.pure-img {
    max-height: 100%;
    width: auto;
}
.flag .pure-img {
    max-height: none;
    margin-top: -0.34rem;
}
.status-bar {
    position: fixed;
    bottom: 0;
    right: 0;
    box-shadow: 0 0 2rem 0 rgba(136, 152, 170, .3);
    color: #525f7f;
    background: #fff;
    z-index: 5;
    box-sizing: border-box;
}

.status-bar .inner {
    margin: 0.5em;
}

.status-bar .inner .flag {
    height: 2.6em;
    display: block;
    float: left;
    margin-right: 1em;
}

.status-bar .inner .status-info {
    font-weight: bold;
}

.status-bar .icon-con {
    height: 2.6em;
    text-align: right;
}

footer{
display:block !important;
}
    
@media screen and (max-width: 700px) {
.status-bar .icon-con {
    height: 2.5em;
}
}
</style>

<div class="status-bar">
    <div class="inner">
        <div class="pure-g">
            <div class="pure-u-1-2">
                <span class="flag"><img src="/luci-static/bypass/flags/loading.svg" class="pure-img"></span> <span
                    class="status-info">获取中...</span>
            </div>
            <div class="pure-u-1-2">
                <div class="icon-con">
                    <img src="/luci-static/bypass/img/site_icon1_01.png" class="pure-img i1">
                    <img src="/luci-static/bypass/img/site_icon1_02.png" class="pure-img i2">
                    <img src="/luci-static/bypass/img/site_icon1_03.png" class="pure-img i3">
                    <img src="/luci-static/bypass/img/site_icon1_04.png" class="pure-img i4">
                </div>
            </div>
        </div>
    </div>
</div>

<script>
const _ASSETS = '/luci-static/bypass/';
const CHECK_IP_URL = '<%=url([[admin]], [[services]], [[bypass]], [[ip]])%>';

let wW = window.innerWidth;

function resize() {
    wW = window.innerWidth;
    let lw = document.querySelector(".main-left")?.offsetWidth ?? 5;
    let statusBar = document.querySelector(".status-bar");
    statusBar.style.width = (wW - lw) + 'px';
    let flagElement = statusBar.querySelector(".flag");
    flagElement.style.width = (flagElement.offsetHeight / 3 * 4) + 'px';

    document.querySelectorAll(".flag-icon").forEach(function(el) {
        if (el.offsetHeight < 60) {
            el.parentElement.style.height = '60px';
            el.style.width = '60px';
        } else {
            el.style.width = el.offsetHeight + 'px';
        }
    });
}

function write_status(data) {
        document.querySelector(".flag img").src = _ASSETS + "flags/" + data.flag + ".svg";
        document.querySelector(".status-info").innerHTML = data.ip + "<br>" + data.country + "&nbsp;" + data.isp;
    document.querySelector(".i1").src = data.baidu ? _ASSETS + "img/site_icon_01.png" : _ASSETS + "img/site_icon1_01.png";
    document.querySelector(".i2").src = data.taobao ? _ASSETS + "img/site_icon_02.png" : _ASSETS + "img/site_icon1_02.png";
    document.querySelector(".i3").src = data.google ? _ASSETS + "img/site_icon_03.png" : _ASSETS + "img/site_icon1_03.png";
    document.querySelector(".i4").src = data.youtube ? _ASSETS + "img/site_icon_04.png" : _ASSETS + "img/site_icon1_04.png";
    setTimeout(function() {
        let event = new Event('iploaded');
        document.body.dispatchEvent(event);
    }, 200);
}

XHR.poll(5, CHECK_IP_URL, null,
        function (x, data) {
            write_status(data);
        }
    );

document.addEventListener('DOMContentLoaded', function() {
    setTimeout("resize()",100)
    fetch(CHECK_IP_URL)
        .then(response => response.json())
        .then(data => {
            write_status(data);
        })
        .catch(error => console.error('Error:', error));
});

window.addEventListener('resize', resize);
</script>
